<template>
  <div>
    <router-link to="/myself">
        <span style="float:left" @click="blacklist=false;Topshow=true;alltext=true">
            <b>
                <i style="padding:0.2rem" class="iconfont icon-xiangzuojiantou"></i>
            </b>
        </span>
    </router-link>
    <router-view></router-view>
    <h3 style="text-align: center;padding:0.2rem">
        <b>
            我的兼职
        </b>
    </h3>
    <div style="width:100%;height:100px;" v-for="(job,index) in jobone" :key="index">
        <h3>
            {{job.name}}
        </h3>
        <span class="jobid" style="display:none">
            {{job.id}}
        </span>
        <span style="margin-left: 0.5rem;">
            发布日期:{{job.time}}
        </span>
        <p>

            <!-- <button @click="deletejob(index)" style="margin-left:2%;float:right;background-color: cadetblue;border: none;padding: 0.2rem;border-radius: 10%;color: white;outline: none;">
                取消兼职
            </button> -->
            <button @click="changejobcontain(index)" style="float:right;background-color: #007fff;border: none;padding: 0.2rem;border-radius: 10%;color: white;outline: none;">
                修改兼职信息
            </button>
        </p>
    </div>


<p id="jobId"></p>
          <van-popup id="activitychangediv" v-model="changeactivity" position="bottom" :style="{ height: '50%' }">
                <div>
                    
                    <!--活动帖子的id-->
                    <!-- 年龄 -->
                    <p>
                        <select id="age">
                            <option>19</option>
                            <option>20</option>
                            <option>21</option>
                        </select>
                    </p>
                    <!-- 学校 -->
                    <p>
                        <select id="school">
                            <option>河南科技学院</option>
                            <option>河南师范大学</option>
                            <option>河南理工大学</option>
                        </select>
                    </p>
                    <!-- 性别 -->
                    <p>
                        <select id="sex">
                            <option>请选择</option>
                            <option>男</option>
                            <option>女</option>
                        </select>
                    </p>
                    <p>
                        <input id="telephone" placeholder="请输入手机号">
                    </p>
                    <p>
                        <input id="name" placeholder="请输入姓名">
                    </p>
                    <p>
                        <button style="margin-left: 60%;margin-right: 0.5rem;" @click="hidePopup()">取消</button>
                        <button @click="yeschangeactivity()">确认</button>
                    </p>
                </div>
            </van-popup>



    
  </div>
</template>

<script>

import axios from 'axios'

export default {
    name:'Myhistory',
    components:{
      
    },
    data(){
        return{
            showcollectselect: false,
            jobone:null,
            changeactivity:false
        }
    },
    methods: {
        changejobcontain(index){
            console.log(index)
            var jobid  = document.getElementsByClassName("jobid")[index].innerHTML;
            console.log(jobid)

            this.changeactivity=true
            var jobId  = document.getElementById("jobId");
            jobId.innerHTML=jobid
            console.log(jobId)
            //将这个复制给jobid
            //来这里复制
        },
        //隐藏修改框
        hidePopup(){
            this.changeactivity=false
        },
        //点击显示修改报名信息的弹出框
        changeactivitycontain(){
            this.changeactivity=true
        },
        //修改兼职信息
        yeschangeactivity(){
            var jobId  = document.getElementById("jobId").innerHTML;
           //取出里的值
       
            // 年龄
            var age = document.getElementById("age");
            console.log(age)
             //名字
             var namee  = document.getElementById("name");
             console.log(namee)
            //学校school
            var school  = document.getElementById("school");
             console.log(school)
            //性别sex
            var sex  = document.getElementById("sex");
             console.log(sex)
            //电话号码telephone
            var telephone  = document.getElementById("telephone");
             console.log(telephone)
            //首先弹出框 之后进行修改兼职信息 调用修改兼职信息的接口
            this.changeactivity=true
            //调用接口
            axios({
                url:'/modifySignUpActivity',
                method:'post',
                params:{
                    jobId:jobId,
                    age:age.value,
                    name:namee,
                    school:school.value,
                    sex:sex.value,
                    telephone:telephone,
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                }
            }).then(data => {
                console.log(data)
                console.log("成功修改兼职报名信息")
                // 重新刷新这个页面
                // this.$router.push('/myhistory');
                
            }).catch(err => {
                console.log(err)
            })
            

        }
    },
    mounted() {
        //遍历我的兼职
            axios({
            url:'/getAllJobSignUpInfo?state=0',
            method:'get',
            headers:{
                'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
            }
        }).then(data => {
            console.log(data)
            this.jobone=data.data.data
            console.log(this.jobone)
        }).catch(err => {
            console.log(err)
        })
    },
}
</script>

<style lang="less" scope>
h3{
  text-align:center;
  padding: 0.2rem;
}


    #activitychangediv{
        p{
            padding: 0;
            margin: auto;
            margin-top: 0.5rem;
            select{
                border: 1px solid rgb(245 245 247) ;
                width:100% ;
                height: 15%;
                background-color: white;
            }
            input{
                text-indent: 10px;
                border: 1px solid rgb(245 245 247) ;
                width:100% ;
                height: 10%;
            }
            button{
                padding: 0.3rem;
                margin: 0.2rem;
            }
        }
    }

</style>